Optimize animated landing demos and align workspace controls - #22

Summary

This PR improves the public landing-page demo payloads and fixes two real workspace accessibility findings from the Lighthouse audit.

Changes

• Serve animated WebP versions of the three landing demos through <picture>, retaining the original GIFs as fallbacks.
• Reduce the three demo assets from 377 KiB total GIFs to 118 KiB total WebPs.
• Keep the visible New Snippet label aligned with its accessible name at every breakpoint.
• Increase the desktop folder expand/collapse control from 16×16 px to 24×24 px.
• Add comparable before/after screenshots for landing and app desktop/mobile views.

Production baseline

Production URL: https://klipcode.com

The main causal landing findings were mobile LCP around 3.5–4.1 s, TBT around 5.3 s, and roughly 360 KiB of avoidable image delivery. The app desktop accessibility findings were the visible-label/accessibility-name mismatch and the 16×16 px folder control.

Validation

• pnpm lint ✅
• pnpm exec tsc --noEmit ✅
• pnpm test ✅ — 15 files, 169 tests
• pnpm build ✅
• Playwright ✅ — WebP current source, GIF fallback, natural dimensions, and animation frame changes verified
• git diff --check ✅
• Local Lighthouse on the existing build:
  • Landing / and /es: 60/100/100/100 desktop; 55/100/100/100 mobile.
  • Fresh Lighthouse app profiles remained on the loading shell even after a 30-second pause, producing transient 0–40 Performance / 91 Accessibility results. This local shell lacks the production backend/auth state; those app scores are intentionally not treated as product-quality scores. Playwright reached the stable shell after a normal wait.
• No deploy or merge was performed.

Before / after screenshots

View	Before	After
Landing desktop
Landing mobile
App desktop
App mobile

\* The production /es/app mobile run also captured a transient loading state and is not treated as a stable baseline.